<div x-data="{is_show_info: false, is_show_version: false}">
    <div class="relative">
        <button type="button" class="absolute left-2 top-2 z-20" aria-label="后退">
            <img x-on:click="history.back()" src="{{ asset('img/play_back.png') }}" alt="back" width="35" height="35">
        </button>

        @if($version)
            <img class="w-full aspect-video object-cover" src="{{ file_url($this->currentPlay->path) }}" alt="{{ $this->currentPlay->version }}">
        @else
            <img class="w-full aspect-video object-cover" src="{{ file_url($video->picture) }}" alt="{{ $video->title }}">
        @endif

        @if($video->vip)
            <div class="absolute z-10 inset-0 bg-black/30 flex flex-col items-center justify-center text-sm">
                <p class="text-white pb-2">登入或注册观看完整影片！</p>
                <a wire:navigate href="{{ route('login') }}" class="px-4 py-1 bg-gradient-to-r from-red-500 to-[red] text-white rounded-full">
                    登入/注册
                </a>
            </div>
        @endif
    </div>

    <div class="p-2 flex items-center">
        <h1 class="truncate text-lg flex-1">{{ $video->title }}</h1>
        <button x-on:click="is_show_info = !is_show_info"
                x-bind:class="{'rotate-180': is_show_info}"
                type="button" class="flex-none transition-all" aria-label="展开详情">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                <path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z" clip-rule="evenodd"/>
            </svg>
        </button>
    </div>

    <div class="p-2 flex gap-2 text-stone-500">
        <button x-on:click="is_show_version = !is_show_version"
                type="button" class="flex gap-1 items-center" aria-label="切换版本">
            @if(str_contains($this->currentPlay->version, '高清'))
                <img src="{{ asset('img/HD.png') }}" alt="hd" width="24" height="24">
            @else
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z"/>
                </svg>
            @endif

            <span>{{ $this->currentPlay->version }}</span>
            <svg class="w-4 h-4 transition-all"
                 x-bind:class="{'rotate-180': is_show_version}"
                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z" clip-rule="evenodd"/>
            </svg>
        </button>
    </div>

    <div x-transition x-show="is_show_version" x-on:click.self="is_show_version = false"
         class="fixed inset-0 bg-black/30 z-20">
        <div class="p-2 m-2 divide-y bg-white rounded-xl fixed inset-0 top-auto text-center min-h-[200px]">
            <h1 class="font-bold text-lg py-2">当前版本：{{ $this->currentPlay->version }}</h1>
            <div class="pt-3 grid gap-2 grid-cols-3" wire:ignore>
                @foreach($video->videos as $v)
                    <a wire:navigate href="{{ request()->fullUrlWithQuery(['version' => $v['fields']['id']]) }}" class="leading-loose bg-gradient-to-r from-red-500 to-[red] text-white rounded-full">
                        {{ $v['fields']['version'] }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    <div class="px-2 grid grid-cols-3 gap-2 text-stone-500 text-sm">
        <div class="cursor-pointer flex gap-2 items-center justify-center">
            <img src="{{ asset('img/action_collect.png') }}" alt="collect" width="24" height="24">
            收藏
        </div>

        <button x-on:click="navigator.clipboard.writeText('{{ route('videos.show', $video) }}').then(e => mui.toast('复制成功，快去分享吧！'))"
            type="button" class="cursor-pointer flex gap-2 items-center justify-center">
            <img src="{{ asset('img/action_share.png') }}" alt="share" width="24" height="24">
            分享
        </button>

        <div class="cursor-pointer flex gap-2 items-center justify-center">
            <img src="{{ asset('img/action_report.png') }}" alt="report" width="24" height="24">
            报错
        </div>
    </div>

    <div x-transition x-show="is_show_info"
         class="bg-white fixed z-10 inset-0 top-auto pb-[80px] shadow-inner divide-y">
        <div class="flex items-center p-2">
            <p class="flex-1 text-lg font-bold">详情</p>

            <button x-on:click="is_show_info = false" type="button" class="flex-none" aria-label="close">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        <div>
            <div class="p-2 flex items-start gap-2 text-sm leading-relaxed">
                <a class="px-2 flex-none rounded-full border border-gray-400">标签</a>
                <div class="flex flex-1 flex-wrap items-center gap-2">
                    @foreach(\App\Models\Tag::has('videos')->get() as $tag)
                        <a href="{{ route('videos.index', compact('tag')) }}" class="text-red-600 hover:underline">{{ $tag->title }}</a>
                    @endforeach
                </div>
            </div>

            <div class="p-2 flex items-start gap-2 text-sm leading-relaxed">
                <a class="px-2 flex-none rounded-full border border-gray-400">演员</a>
                <div class="flex flex-1 flex-wrap items-center gap-2">
                    @foreach($video->actors as $actor)
                        <a href="{{ route('actors.show', compact('actor')) }}" class="hover:underline">{{ $actor->title }}</a>
                    @endforeach
                </div>
            </div>

            <div class="p-2 flex items-start gap-2 text-sm leading-relaxed">
                <a class="px-2 flex-none rounded-full border border-gray-400">时长</a>
                <span>04:51</span>
            </div>

            <div class="p-2 flex items-start gap-2 text-sm leading-relaxed">
                <a class="px-2 flex-none rounded-full border border-gray-400">时间</a>
                <span>{{ $video->created_at->diffForHumans() }}</span>
            </div>

            <div class="p-2 flex items-start gap-2 text-sm leading-relaxed">
                <a class="px-2 flex-none rounded-full border border-gray-400">简介</a>
                <p>{{ $video->description }}</p>
            </div>
        </div>
    </div>

    <div class="p-2">
        <a href="" target="_blank" ref="noopener noreferrer">
            <img class="w-full" src="{{ asset('img/upload/play_dark.png') }}" alt="">
        </a>
    </div>

    <p class="bg-neutral-100 h-2"></p>

    @if($collection->isNotEmpty())
        <h3 class="text-lg px-2 mt-2">猜你喜欢</h3>
        <div class="grid grid-cols-2 gap-2 px-2 my-2">
            @foreach($collection as $v)
                <x-video-item :video="$v" :key="$v->id"/>
            @endforeach
        </div>

        @includeWhen($hasMorePages, 'partials.load-more')
    @endif
</div>
